<template>
  <el-card>
    <el-form label-width="100px">
      <el-form-item label="角色名:">
        <span>{{ route.query.roleName }}</span>
      </el-form-item>
      <el-form-item label="角色权限:">
        <!-- 
          ref="treeRef" 获取组件实例对象，从而使用组件的一些方法
          data 要渲染的数据
            [{ id: xxx, label: xxx, children: [] }]
          show-checkbox 显示复选框
          default-expand-all 默认展示所有
          node-key="id" 遍历的每个元素key属性取值
        -->
        <el-tree
          class="role-tree"
          ref="treeRef"
          :data="permissionList"
          show-checkbox
          default-expand-all
          node-key="id"
          :props="{
            children: 'children',
            label: 'name',
          }"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "RoleAuth",
};
</script>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getRolePermissionApi, assignRolePermissionApi } from "@/api/acl/permission";
import type { PermissionList } from "@/api/acl/model/permissionModel";
import { ElMessage } from "element-plus";

const route = useRoute();

// 全部权限列表
const permissionList = ref<PermissionList>([]);
// 当前用户选中的权限列表
// const checkedPermissionList = ref([]);

const treeRef = ref();

// 获取选中的菜单id
function getSelectPermission(permissionList: PermissionList) {
  let selectPermissionList: string[] = [];

  permissionList.forEach((permission) => {
    /*
      1. 如果没有子菜单，select: true, 就要选中
      2. 如果有子菜单，select: true
        所有子菜单选中，当前父菜单才选中
        只要有一个子菜单没有选中，当前父菜单就不选中
    */

    if (permission.children.length) {
      // 有子菜单
      // 得到选中的子菜单数据
      const childrenSelectPermissionList = getSelectPermission(permission.children);

      // 判断子菜单列表和原来长度是否一致
      if (childrenSelectPermissionList.length === permission.children.length) {
        // 一致说明全选
        selectPermissionList.push(permission.id);
      } else if (childrenSelectPermissionList.length) {
        // 不一致，当前菜单就不需要了，只需要子菜单
        selectPermissionList = [...selectPermissionList, ...childrenSelectPermissionList];
      }
    } else {
      // 没有子菜单
      if (permission.select) {
        // 将当前菜单添加，将来就会选中
        selectPermissionList.push(permission.id);
      }
    }
  });

  return selectPermissionList;
}

onMounted(async () => {
  const result = await getRolePermissionApi(route.query.id as string);
  permissionList.value = result.children;
  // 遍历所有数据，查找select：true的菜单
  const selectedPermissionList = getSelectPermission(result.children);
  treeRef.value.setCheckedKeys(selectedPermissionList);
});

const router = useRouter();

const submitForm = async () => {
  // 所有选中的菜单id
  const checkedKeys = treeRef.value.getCheckedKeys();
  // 所有半选的菜单id
  const halfCheckedKeys = treeRef.value.getHalfCheckedKeys();
  await assignRolePermissionApi(route.query.id as string, [...checkedKeys, ...halfCheckedKeys]);
  ElMessage.success("分配角色权限成功");
  router.push({
    name: "Role",
  });
};
</script>

<style scoped>
.role-tree {
  min-width: 120px;
}
</style>
